<?php
include('../incsession.php');

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>系統介紹</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
<style type="text/css">
input.groovybutton
{
   font-size:15px;
   font-family:Arial,sans-serif;
   color:#777777;
   width:18px;
   height:18px;
   background-color:#DDDDDD;
   border-style:none;
   border-color:#777777;
   border-width:1px;
}
</style>
</head>

<body onLoad="TimeCountDown()">
<div id="wrapper">
	<div id="header">
		<div id="logo"></div>
		<div id="menu">
        <?php
			include("menu.php");
		?>
       
		</div>
	</div>
	<div class="clearer"></div>
	<div class="edge-top"></div>

	<div id="main">

		<div id="title">系統與課程介紹<font size=4></font></div>
<hr/><br><br>

<!-- 內文開始 !-->
<script type="text/javascript" language="JavaScript">
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseDisplay(d1,d2, d3) {
if(document.getElementById(d1).style.display == "none") { document.getElementById(d1).style.display = "block"; }
else { document.getElementById(d1).style.display = "none"; }
if(document.getElementById(d2).style.display == "none") { document.getElementById(d2).style.display = "block"; }
else { document.getElementById(d2).style.display = "none"; }
if(document.getElementById(d3).style.display == "none") { document.getElementById(d3).style.display = "block"; }
else { document.getElementById(d3).style.display = "none"; }
}
</script>
<div id="button_show1" style="display:block;">
<form name="groovyform">
<input
   type="button"
   name="groovybtn1"
   class="groovybutton"
   value="+"
   title=""
   onClick = "javascript:ReverseDisplay('button_show1','content1','button_hide1')">&nbsp;介紹
</form>
</div>
<div id="button_hide1" style="display:none;">
<form name="groovyform">
<input
   type="button"
   name="groovybtn1"
   class="groovybutton"
   value="-"
   title=""
   onClick = "javascript:ReverseDisplay('button_show1','content1','button_hide1')">&nbsp;介紹
</form>
</div>
<div id="content1" style="display:none;">
<?php 
$query = "SELECT * FROM system";
$result = mysql_query($query,$orcp_con);
$row = mysql_fetch_array($result);
echo "<p>".$row['sys_intro1']."</p>";
?>
</div>

<div id="button_show2" style="display:block;">
<form name="groovyform">
<input
   type="button"
   name="groovybtn1"
   class="groovybutton"
   value="+"
   title=""
   onClick = "javascript:ReverseDisplay('button_show2','content2','button_hide2')">&nbsp;十項步驟
</form>
</div>
<div id="button_hide2" style="display:none;">
<form name="groovyform">
<input
   type="button"
   name="groovybtn1"
   class="groovybutton"
   value="-"
   title=""
   onClick = "javascript:ReverseDisplay('button_show2','content2','button_hide2')">&nbsp;十項步驟
</form>
</div>
<div id="content2" style="display:none;">
<?php
echo "<p>".$row['sys_intro2']."</p>";
?>
</div>

<div id="button_show3" style="display:block;">
<form name="groovyform">
<input
   type="button"
   name="groovybtn1"
   class="groovybutton"
   value="+"
   title=""
   onClick = "javascript:ReverseDisplay('button_show3','content3','button_hide3')">&nbsp;主動、責任學習
</form>
</div>
<div id="button_hide3" style="display:none;">
<form name="groovyform">
<input
   type="button"
   name="groovybtn1"
   class="groovybutton"
   value="-"
   title=""
   onClick = "javascript:ReverseDisplay('button_show3','content3','button_hide3')">&nbsp;主動、責任學習
</form>
</div>
<div id="content3" style="display:none;">
<?php
echo "<p>".$row['sys_intro3']."</p>";
?>
</div>
<div class="btn_right">
<form action = 'level.php'>
<input type="submit" value = "下一步 >> 選擇難度">
</form>
</div>
<!-- 內文結束 !-->

	</div>
    <div class="edge-bottom"></div>
    <div id="footer"><?php  include("footer.php"); ?></div>
</div>


<!--
<div id="association">&nbsp;association</div>
<div id="voc_cart">&nbsp;vocabulary cart</div> 
!-->
</body>
</html>